/* eslint-disable no-undef */
<template>
  <!-- // 地图 -->
  <div class="homePageCard height-43">
    <div class="mapDiv">
      <div class="grollDiv">随州市 今日天气：暴雨 温度：26℃-31℃ 南风8-9级 明日天气：大雨 温度：27℃-33℃ 南风7-8级</div>
      <div class="full-box" @click="fullscreen">
        <img src="@/assets/img/full.png" alt="">
        <span>全屏</span>
      </div>
      <div id="map" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script>
import sjccKey from "../../../config/sjmapkey";
export default {
  name: "MapContent",
  components: {
  },
  data: function () {
    return {
      FullScreen: false,
      isShow: false,
      map: null,
      geo: null,
      preId: null,
      geocodingTask: null,
      popupInfoWindow: null,
      mapData: [
        { id: "123", dangerName: "暴雨", effectRange: "III级", address: "随州市柳林镇" }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    drawPoint(res) {
      const self = this;
      self.popupInfoWindow && self.popupInfoWindow.remove();
      if (!res || !res.length) {
        return false;
      }
      self.popupInfoWindow = new epgis.Popup({
        closeButton: true,
        closeOnClick: false,
        anchor: "bottom-right",
        offset: [5, 120]
      });

      // 画点
      res.forEach((item) => {
        // let url = require("@/assets/img/fangzi.png");
        if (self.preId && self.preId != item.id) {

          if (self.map.getLayer(self.preId)) {
            self.map.removeLayer(self.preId);
            self.map.removeImage(self.preId + "image");
            if (self.map.getSource(self.preId)) { self.map.removeSource(self.preId); }
            if (self.map.getSource(self.preId + "image")) { self.map.removeSource(self.preId + "image"); }
          }
          self.preId = item.id;
        } else if (self.preId && self.preId == item.id) {
          return false;
        }

        self.preId = item.id;
        var url = null;
        if (item.eventLvCode == 4) {
          url = require("../../../assets/map/red.png");
        } else if (item.eventLvCode == 3) {
          url = require("../../../assets/map/orange.png");
        } else if (item.eventLvCode == 2) {
          url = require("../../../assets/map/yellow.png");
        } else if (item.eventLvCode == 1) {
          url = require("../../../assets/map/blue.png");
        }
        self.map.loadImage(url, (error, image) => {
          self.map.addImage(item.id + "image", image);
          self.map.addLayer({
            id: item.id,
            type: "symbol",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Point",
                      coordinates: [Number(item.geo.split(",")[0]), Number(item.geo.split(",")[1])]
                    },
                    properties: {
                      name: item.id + "layer"
                    }
                  }
                ]
              }
            },
            layout: {
              "icon-image": item.id + "image",
              "icon-size": 0.3,
              "icon-ignore-placement": true,
              "text-ignore-placement": false,
              "text-size": 12,
              "text-anchor": "top",
              "text-allow-overlap": false,
              "icon-anchor": "center",
              "text-offset": [0, 0],
              "text-max-width": 8,
              "text-font": ["Microsoft YaHei Regular"]
            },
            paint: {
              "text-color": "#fff",
              "text-halo-color": "#555252",
              "text-halo-width": 3
            }
          });
        });
        self.map.setZoom(7);
        self.map.setCenter([Number(item.geo.split(",")[0]), Number(item.geo.split(",")[1])]);
        // 监听鼠标进入事件
        self.map.on("mouseenter", item.id, function (e) {
          self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
            .setHTML(
              `<div style="width:450px;height:140px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:35px;line-height:25px;text-align:center;">
                      <div style="font-size:17px;color:#fff;font-weight:700;">${item.responseName}</div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:20px">
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex;justify-content:space-between;">
                        <div style="width:45%;">预警级别：${item.eventLvName}</div>
                        <div style="width:45%;text-align:right">险情类别：${item.eventName}</div>
                      </div>
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响范围：</p><p style="flex:1">${item.effectRange}</p></div>
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响时间：</p><p style="flex:1">${item.occurrenceTime}至${item.occurrenceTime}</p></div>
                    </div>
                  </div>
                  `
            )
            .addTo(self.map);
        });
        // 监听鼠标移出事件
        // self.map.on("mouseleave", item.id, function (e) {
        //   self.popupInfoWindow.remove();
        // });
      });
    },
    // 控制全屏
    fullscreen() { // 进入全屏
      var docElm = document.getElementById("map"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    showImage() {
      this.isShow = true;
      this.init();
    },
    hideImage() {
      this.isShow = false;
    },
    init() {
      // eslint-disable-next-line no-undef
      epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then(res => { this.initMap(); });
    },
    // 申请的key和sn
    initMap() {
      const self = this;
      // eslint-disable-next-line no-undef
      self.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        zoom: 5.5,
        maxZoom: 8,
        minZoom: 5,
        // 地图中心点
        // 荆门
        center: [112.20, 31.13],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      self.map.on("load", function (e) {
        // eslint-disable-next-line no-undef
        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划;
        districtTask.searchDistrict({
          keyword: "湖北省",
          // 建议直辖市取2，其他省份取1，提升请求速度
          subdistrict: 1,
          extension: true,
          isEncode: false
        }).then((result) => {
          let features = [];
          const featuresSymbol = [];
          let featuresPolygon = [];
          // 主要区分直辖市和其他省份;
          const district =
            result.districts[0].sub_districts.length == 1
              ? result.districts[0].sub_districts[0]
              : result.districts[0];
          const shape = district.shape;
          if (shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (const o in shape.coordinates) {
              features = features.concat(shape.coordinates[o]);
            }
          } else {
            features.push(shape.coordinates[0]);
          }
          for (const o in district.sub_districts) {
            // 标注
            featuresSymbol.push({
              type: "Feature",
              geometry: {
                coordinates: district.sub_districts[o].center,
                type: "Point"
              },
              properties: {
                name: district.sub_districts[o].name
              }
            });
          }
          if (district.shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (var o in district.shape.coordinates) {
              featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
            }
          } else {
            featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
          }
          // 行政区画面;
          self.map.addLayer({
            id: "power-polygon",
            type: "fill",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Polygon",
                      coordinates: featuresPolygon
                    }
                  }
                ]
              }
            },
            paint: {
              "fill-color": "#dae4fa",
              "fill-opacity": 0.4
            }
          });
          // 行政区划边界线
          self.map.addLayer({
            id: "power-polygon-lines",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "MultiLineString",
                      coordinates: features
                    }
                  }
                ]
              }
            },
            paint: {
              "line-color": "#0864FC",
              "line-width": 2,
              "line-dasharray": [1, 1] // 控制虚线的疏密
            }
          });
          // 绑定仓库弹窗
          // eslint-disable-next-line no-undef
          // self.popupInfoWindow = new epgis.Popup({
          //   closeButton: false,
          //   closeOnClick: false,
          //   anchor: "bottom",
          //   offset: [0, -20]
          // });
          // 画点

          // self.mapData.forEach((item) => {
          //   const url = require("../../../assets/img/guangquan.png");
          //   // var url = null;
          //   self.map.loadImage(url, (error, image) => {
          //     self.map.addImage(item.id + "poi", image);
          //     self.map.addLayer({
          //       id: item.id,
          //       type: "symbol",
          //       source: {
          //         type: "geojson",
          //         data: {
          //           type: "FeatureCollection",
          //           features: [
          //             {
          //               type: "Feature",
          //               geometry: {
          //                 type: "Point",
          //                 coordinates: [113.10645, 31.69997]
          //               },
          //               properties: {
          //                 name: "111"
          //               }
          //             }
          //           ]
          //         }
          //       },
          //       layout: {
          //         "icon-image": item.id + "poi",
          //         "icon-size": 0.25,
          //         "icon-ignore-placement": true,
          //         "text-ignore-placement": false,
          //         "text-size": 12,
          //         "text-anchor": "top",
          //         "text-allow-overlap": false,
          //         "icon-anchor": "center",
          //         "text-offset": [0, 0],
          //         "text-max-width": 8,
          //         "text-font": ["Microsoft YaHei Regular"]
          //       },
          //       paint: {
          //         "text-color": "#fff",
          //         "text-halo-color": "#555252",
          //         "text-halo-width": 3
          //       }
          //     });
          //   });
          //   // 监听鼠标进入事件
          //   self.map.on("mouseenter", item.id, function (e) {
          //     self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
          //       .setHTML(
          //         `<div style="width:350px;height:100px;display:flex;flex-direction:column;">
          //           <div style="width:100%;height:25px;line-height:25px;text-align:center;">
          //             <div style="font-size:16px;color:#fff;font-weight:700;">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命令〔2021〕 第03号
          //             </div>
          //           </div>
          //           <div style="width:100%;display:flex;flex-direction:column;margin-top:30px">
          //             <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex;justify-content:space-between;">
          //               <div style="width:50%;">响应级别：${item.dangerName}</div>
          //               <div style="width:50%;text-align:right">响应级别：${item.effectRange}</div>
          //             </div>
          //             <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响范围：</p><p style="flex:1">${item.address}</p></div>

          //           </div>
          //         </div>`
          //       )
          //       .addTo(self.map);
          //   });

          //   // 监听鼠标移出事件
          //   self.map.on("mouseleave", item.id, function (e) {
          //     self.popupInfoWindow.remove();
          //   });
          // });

        });
      });
      // self.map.addControl(
      //   new SGMap.ScaleControl({
      //     maxWidth: 80,
      //     unit: "metric"
      //   }),
      //   "bottom-left"
      // );
      // self.map.on("click", function (e) {
      //   self.popupInfoWindow.remove();
      //   console.log(123);
      // });
    }
  }
};

</script>

<style scoped lang="less">
.grollDiv {
  width: 97.1%;
  position: absolute;
  background-color: rgba(13, 35, 82, 0.5);
  top: 9px;
  z-index: 9;
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  text-indent: 10px;
}
.full-box {
  position: absolute;
  top: 35px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.mapDiv {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  #map {
    border-radius: 4px;
    overflow: hidden;
  }
}
.web_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  zoom: 1;
  background-color: rgba(0, 0, 0, 0.9);
}
:deep(.epgis-popup-content) {
  width: 450px !important;
  border-radius: 2px !important;
  background-color: #7e8aa6 !important;
  opacity: 0.8;
}
:deep(.epgis-popup-anchor-bottom .epgis-popup-tip) {
  border-top-color: #7e8aa6 !important;
}
:deep(.epgis-popup-anchor-top .epgis-popup-tip) {
  border-bottom-color: #7e8aa6 !important;
}
:deep(.epgis-popup-tip) {
  background-color: transparent !important;
  opacity: 0.8;
}
</style>
